<template>
  <view class="wrap">
     <top-tab tabTitle="支付订单" backColor="#5B2177" @backClick="backClick"/>
		 <view class="main">
			 <image class="pay-img" src="../../../static/my/wx.png"></image>
			 <view class="orde-pay-finish">订单支付完成</view>
			 <view class="explain">预计0-3个工作日原路退回支付账户</view>
			 <view class="orde-record">订单记录</view>
			 <view class="btn-back-home" @click="backHome">返回首页</view>
		 </view>
  </view>
</template>

<script>
	import topTab from '@/components/top-tabbar.vue'
  export default {
		components: { topTab },
    data() {
      return {}
    },
  onShow() {},
  methods: {
		// 返回首页
		backHome() {
			uni.switchTab({
				url: '/pages/home/index'
			})
		},
		// 返回上一页
		backClick() {
			uni.navigateTo({
			    url: '/pages/my/buy_vip/buy_vip'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	.main{
		text-align: center;
		margin-top:30%;
		.pay-img{
			display: block;
			width: 138rpx;
			height: 138rpx;
			border-radius: 50%;
			margin: auto;
		}
		.orde-pay-finish{
			font-size: 40rpx;
			font-family: Adobe Heiti Std;
			font-weight: 500;
			color: #333333;
			margin: 74rpx 0 34rpx 0rpx;
		}
		.explain{
			font-size: 30rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #898989;
		}
		.orde-record{
			font-size: 30rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #4F93EA;
			margin: 57rpx 0 49rpx 0;
		}
		.btn-back-home{
			width: 600rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #B83DF1, #852CAE);
			border-radius: 44rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: Adobe Heiti Std;
			font-weight: 400;
			color: #FFFFFF;
			margin: auto;
		}
	}
</style>
